<template>
  <div name="comdetail">
    <header>
      <!-- 主题导航 -->
      <MainNav></MainNav>
    </header>

    <section>
      <!-- 商品详情导航条 -->
      <DetailNav></DetailNav>
      <!-- 未登录提示框 -->
      <div :class="['unlogin ' + unloginshow]">
        为方便您购买，请提前登录
        <router-link to class="logintext">立即登录</router-link>
        <span class="iconfont icon-quxiao1" @click="hideloginbtn"></span>
      </div>

      <!-- 主体内容 -->
      <div class="content con_width">
        <div class="com_banner">
          <div class="banner" @mouseenter="stopamnibtn" @mouseleave="openamnibtn">
            <div class="img_box">
              <img
                :class="[bannerID==index?'img_active':'','img']"
                v-for="(item,index) in bannerlist"
                :key="index"
                :src="item"
                alt
              />
            </div>
            <!-- 左右按钮 -->
            <div class="iconfont icon-zuo" @click="zuobtn"></div>
            <div class="iconfont icon-you" @click="youbtn"></div>
            <!-- 指示点 -->
            <div class="dian_box">
              <div
                :class="[bannerID==index?'active':'','dian']"
                v-for="(item,index) in bannerlist"
                :key="index"
                @click="dianbtn(index)"
              ></div>
            </div>
          </div>
        </div>
        <div class="com_detail">
          <div class="com_name">RedmiBook 13 独显</div>
          <div
            class="com_desc"
          >四窄边全面屏 / 全新十代酷睿™处理器 / 全金属超轻机身 / MX250 高性能独显 / 小米互传 / 专业「飓风」散热系统 / 11小时长续航</div>
          <div class="com_filed">小米自营</div>
          <div class="money_box">4799元</div>
          <!-- 地址 -->
          <div class="address_box">
            <i class="iconfont icon-dizhi1"></i>
            <div class="address">
              广东省 广州市 从化区 江浦街道
              <span>修改</span>
            </div>
            <div class="com_static" v-if="true">有现货</div>
            <div class="com_static2" v-else>无货</div>
          </div>
          <!-- 参数选择 -->
          <div class="parameter_box">
            <div class="parameter_list">
              <div class="title">选择显卡</div>
              <ul class="list_con">
                <li
                  :class="[paramlistID==index?'active':'','list']"
                  v-for="(item,index) in paramlist"
                  :key="index"
                  :id="[index%2==0?'mar-rig':'']"
                  @click="paramlistbtn(index)"
                >
                  {{item.name}}
                  <span class="money" v-if="item.money">{{item.money}}元</span>
                </li>
              </ul>
            </div>
            <div class="parameter_list">
              <div class="title">选择版本</div>
              <ul class="list_con">
                <li
                  :class="[editionID==index2?'active':'','list']"
                  v-for="(items,index2) in paramlist[paramlistID].edition"
                  :key="index2"
                  :id="[index2%2==0?'mar-rig':'']"
                  @click="editionbtn(index2)"
                >
                  <img class="edit_img" :src="items.img" alt />
                  <div class="edit_text">{{items.desc}}</div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 合计 -->
          <div class="total">
            <div class="total_desc">
              <div class="desc_text">{{paramlist[paramlistID].edition[editionID].detailtext}}</div>
              <div class="desc_money">{{paramlist[paramlistID].edition[editionID].money}}元</div>
            </div>
            <div class="total_money">合计：{{paramlist[paramlistID].edition[editionID].money}}元</div>
          </div>

          <!-- 购买按钮 -->
          <div class="btn_box">
            <div class="buy_btn">加入购物车</div>
            <!-- @click="likebtn" -->
            <div :class="[likecom?'likebtn2':'','likebtn']">
              <i class="iconfont icon-like"></i>
              <span>喜欢</span>
            </div>
          </div>

          <!-- 说明 -->
          <div class="explain">
            <div class="explain_list">
              <i class="iconfont icon-dui"></i>
              <span>小米自营</span>
            </div>
            <div class="explain_list" title="由小米发货">
              <i class="iconfont icon-dui"></i>
              <span>小米发货</span>
            </div>
            <div class="explain_list">
              <i class="iconfont icon-dui"></i>
              <span>7天无理由退货</span>
            </div>
            <div
              class="explain_list"
              title="
由小米发货商品(不含有品),单笔满99元免运费;
由小米有品发货的商品,免运费;
由第三方商家发货的商品,免运费;
特殊商品需要单独收取运费,具体以实际结算金额为准;优惠券等不能抵扣运费金额;如需无理由退货,用户将承担该商品的退货物流费用;"
            >
              <i class="iconfont icon-dui"></i>
              <span>运费说明</span>
            </div>
            <div class="explain_list" title="123123123">
              <i class="iconfont icon-dui"></i>
              <span>企业信息</span>
            </div>
            <div class="explain_list">
              <i class="iconfont icon-dui"></i>
              <span>7天价格保护</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 详情介绍 -->
      <div class="detail_introduce">
        <div class="con_width">
          <div class="introduce_list">
            <img class="img1" src="/images/comdetail/detail1.jpg" alt />
          </div>
          <div class="introduce_list">
            <div class="introduce_title">官方微信</div>
            <img class="img1" src="/images/comdetail/detail2.jpg" alt />
          </div>
          <div class="introduce_list">
            <div class="introduce_title">价格说明</div>
            <img class="img1" src="/images/comdetail/detail3.jpg" alt />
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <Footer></Footer>
    </footer>
  </div>
</template>

<script>
import MainNav from "../components/MainNav/MainNav.vue";
import DetailNav from "../components/DetailNav/DetailNav.vue";
import Footer from "../components/Footer/Footer.vue";
export default {
  name: "comdetail",
  data() {
    return {
      likecom: false,
      unloginshow: "",
      bannerID: 0,
      bannerlist: [
        "/images/comdetail/c1.jpg",
        "/images/comdetail/c2.jpg",
        "/images/comdetail/c3.jpg",
        "/images/comdetail/c4.jpg",
        "/images/comdetail/c5.jpg"
      ],
      paramlistID: 0,
      editionID: 0,
      paramlist: [
        {
          name: "独显",
          edition: [
            {
              img: "/images/comdetail/c1.jpg",
              desc: "i5 8G 512G",
              detailtext: "RedmiBook 13 i5 8G 512G SATA MX250 2G 银 ",
              money: "4799"
            },
            {
              img: "/images/comdetail/c1.jpg",
              desc: "i7 8G 512G",
              detailtext: "RedmiBook 13 i7 8G 512G SATA MX250 2G 银",
              money: "5499"
            }
          ]
        },
        {
          name: "集显",
          money: "4499",
          edition: [
            {
              img: "/images/comdetail/c1.jpg",
              desc: "i5 8G 512G",
              detailtext: "RedmiBook 13 i5 8G 512G SATA 集显 银  ",
              money: "4499"
            }
          ]
        }
      ]
    };
  },
  //   页面开启时设置定时器
  mounted: function() {
    this.setTime();
    // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0, 0);
  },
  //  页面关闭时清除定时器
  beforeDestroy() {
    this.clearTime();
  },
  methods: {
    // 隐藏用户未登录提示
    hideloginbtn: function() {
      this.unloginshow = "unlogin2";
    },

    // 选择参数
    paramlistbtn: function(index) {
      this.paramlistID = index;
      this.editionID = 0;
    },
    editionbtn: function(index2) {
      this.editionID = index2;
    },

    // 喜欢按钮
    likebtn: function() {
      this.likecom = !this.likecom;
    },

    // banner
    zuobtn: function() {
      var len = this.bannerlist.length;
      this.bannerID--;
      if (this.bannerID < 0) {
        this.bannerID = len - 1;
      }
    },
    youbtn: function() {
      var len = this.bannerlist.length;
      this.bannerID++;
      if (this.bannerID > len - 1) {
        this.bannerID = 0;
      }
    },
    dianbtn: function(index) {
      this.bannerID = index;
    },
    // 鼠标移上时清除定时器
    stopamnibtn: function() {
      this.clearTime();
    },
    // 鼠标移开时开启定时器
    openamnibtn: function() {
      this.setTime();
    },
    // 图片自动切换
    // 设置定时器
    setTime: function() {
      var len = this.bannerlist.length;
      this.clearTimeSet = setInterval(() => {
        this.bannerID++;
        if (this.bannerID > len - 1) {
          this.bannerID = 0;
        }
      }, 4000);
    },
    //清除定时器
    clearTime() {
      clearInterval(this.clearTimeSet);
    }
  },
  components: {
    MainNav,
    DetailNav,
    Footer
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/ComDetail.scss";
</style>